 <template>
  <div class="atlas_management">
    <!-- 左侧区域 -->
    <div class="left">
      <leftTree
        :showDcml="false"
        :nodeKey="nodeKey"
        title="图册类型"
        :treeData="atlasTree"
        :leftTreeSelect="leftTreeSelect"
        :defaultProps="defaultProps"
      />
    </div>
    <!-- 列表 -->

    <!-- 中间区域 -->
    <article class="middle_main" v-show="!isDetails">
      <!-- 搜索 -->
      <div class="search_box">
        <el-input
          placeholder="搜索"
          v-model="inputVal"
          prefix-icon="el-icon-search"
          size="mini"
          maxlength="100"
        >
        </el-input>
        <el-button type="primary" size="mini" @click="handleIconClick"
          >搜索</el-button
        >
      </div>
      <!-- 图册 -->
      <div
        class="atlas"
        v-loading="atlasLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.5)"
      >
        <el-row style="width: 100%">
          <el-col
            :span="3"
            v-for="(item, index) in atlasList"
            :key="index"
            class="atlas_item"
          >
            <div @click="atlasDetails(item)">
              <img src="~@/assets/showDataSubystem/book.png" alt="" />
              <p>{{ item.atlasName }}</p>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 分页 -->
      <div class="pro-pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          small
          :current-page.sync="atlasParams.pageNum"
          :page-size="atlasParams.pageSize"
          layout="prev, pager, next, total, jumper"
          :total="atlasParams.total"
          style="text-align: right; margin: 0.2rem 0.6rem 0 0"
        >
        </el-pagination>
      </div>
    </article>

    <!-- 详情 -->
    <article class="right_main" v-show="isDetails">
      <!-- tabs -->
      <div class="atlas-tab-wrap flex-center-start">
        <!-- tabs -->
        <div class="atlas-tab flex-center-start">
          <span class="back" @click="isDetails = false">返回上一级</span>
          <span
            class="download extend-click"
            @click="download"
            title="文件下载"
          >
            <i class="el-icon-download"></i>
          </span>
          <span class="tcName one-line-ellipsis"
            >图册名称：{{ atlasItem.atlasName }}</span
          >
          <span class="tcName one-line-ellipsis"
            >创建人：{{ atlasItem.loginName }}</span
          >
          <span class="tcName one-line-ellipsis"
            >上传时间：{{ atlasItem.createDate }}</span
          >
          <span class="tcName one-line-ellipsis"
            >描述：{{ atlasItem.memo }}</span
          >
        </div>
      </div>
      <!-- pdf -->
      <pdf :fileUrl="src" />
    </article>
  </div>
</template>

<script>
import { mapState } from "vuex";
import leftTree from "@/components/common/leftTree.vue";
import pdf from "@/components/pdf.vue";

export default {
  name: "atlasManagement",
  components: {
    leftTree,
    pdf,
  },
  data() {
    return {
      nodeKey: "id",
      inputVal: "",
      defaultProps: {
        children: "children",
        label: "atlasName",
      },
      isDetails: false,
      // 详情数据
      atlasItem: {},
      src: "",
    };
  },
  // updated() {
  //   console.log(this.atlasList);
  // },
  computed: {
    ...mapState({
      atlasTree: (state) => state.qbShow.atlasTree,
      atlasList: (state) => state.qbShow.atlasList,
      atlasParams: (state) => state.qbShow.atlasParams,
      atlasLoading: (state) => state.qbShow.atlasLoading,
    }),
  },
  methods: {
    // 文件下载
    download() {
      if (this.atlasItem.fileUrl) {
        window.location.href = `${window.VUE_APP_BASE_URL}/${this.atlasItem.fileUrl}`;
      }
    },
    // 初始化
    init() {
      // 左侧树
      this.$store.dispatch("qbShow/getAtlasTree");
      this.selectTotalCount({ params: this.atlasParams });
    },
    // 左侧树查询图册
    leftTreeSelect({ targetType }) {
      const atlasParams = this.atlasParams;
      atlasParams.typeId = targetType;
      atlasParams.pageNum = 1;
      this.selectTotalCount({ params: atlasParams });
    },
    handleIconClick(e) {
      e.preventDefault();
      const atlasParams = this.atlasParams;
      atlasParams.name = this.inputVal;
      atlasParams.pageNum = 1;
      this.selectTotalCount({ params: atlasParams });
    },
    // 图册列表查询
    selectTotalCount({ params }) {
      this.$store.dispatch("qbShow/selectTotalCount", { params });
    },
    // 分页查询
    handleCurrentChange(val) {
      const atlasParams = this.atlasParams;
      atlasParams.pageNum = val;
      this.selectTotalCount({ params: atlasParams });
    },
    // 切换详情/ 列表
    atlasDetails(item) {
      this.atlasItem = item;
      this.isDetails = true;
      if (this.atlasItem.fileUrl) {
        this.src = this.atlasItem.fileUrl;
        console.log(888, this.src);
        if (this.src.split(".word")[0].length != this.src.length) {
          this.src = this.src.split(".word")[0] + ".pdf";
        }
        if (this.src.split(".doc")[0].length != this.src.length) {
          this.src = this.src.split(".doc")[0] + ".pdf";
        }
        if (this.src.split(".ppt")[0].length != this.src.length) {
          this.src = this.src.split(".ppt")[0] + ".pdf";
        }
        // if (this.src.split(".pdf")[0].length != this.src.length) {
        //   this.src = this.src.split(".pdf")[0] + ".pdf";
        // }
        console.log(999, this.src);
        // this.src = pdf.createLoadingTask(this.src);
        // this.choosedItem = this.$route.params.item;
        // this.videoURL = this.$route.params.item.fileUrl;
      } else {
        this.$router.go(-1);
      }
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="scss">
// @import "~@/styles/mixin.scss";
.atlas_management {
  position: relative;
  top: 10vh;
  padding: 0.1rem 0.5rem;
  display: flex;
  height: 90vh;
  #end {
    display: none !important;
  }
  //  左侧侧边栏
  .left {
    width: 3rem;
    height: 88vh;
    background: url(~@/assets/showDataSubystem/left.png) no-repeat;
    background-size: 100% 107%;
    padding: 0 0.2rem;
    font-size: 0.16rem;
  }
  //   中间内容区域
  .middle_main {
    width: 83%;
    background: url(~@/assets/showDataSubystem/center.png) no-repeat;
    background-size: 100% 107%;
    margin-top: -0.3rem;
    margin-left: 0.1rem;
    padding: 0.1rem;
    // 搜索
    .search_box {
      padding-left: 70%;
      margin-bottom: 0.4rem;
      margin-top: 0.1rem;
      margin-right: 0.1rem;
      display: flex;
      align-items: center;
      .el-input--mini .el-input__inner {
        color: #cccccc;
        background-color: #034576;
        border: 0px;
      }
    }
    // 列表
    .atlas {
      display: flex;
      flex-wrap: wrap;
      height: 70vh;
      .atlas_item {
        height: 18vh;
        text-align: center;
        color: white;
        font-size: 0.12rem;
        cursor: pointer;
        img {
          width: 50%;
        }
        p {
          margin: 0.25rem;
        }
      }
    }
  }
  //   右侧详情
  .right {
    width: 3.5rem;
    margin-top: -0.3rem;
    background: url(~@/assets/showDataSubystem/right.png) no-repeat;
    background-size: 100% 107%;
    padding: 0.2rem;
    font-size: 0.12rem;
    color: white;
  }
  //  详情中间
  .right_main {
    width: 83%;
    background: url(~@/assets/showDataSubystem/center.png) no-repeat;
    background-size: 100% 107%;
    margin-top: -0.3rem;
    margin-left: 0.1rem;
    padding: 0.1rem;
    .atlas-tab-wrap {
      height: 0.5rem;
      border-bottom: 1px solid #034475;
      font-size: 0.16rem;
      .atlas-tab {
        width: 100%;
        color: #2acaff;
        padding-left: 0.5rem;
        .back {
          font-size: 0.14rem;
          cursor: pointer;
        }
        .download {
          cursor: pointer;
          margin-left: 0.1rem;
          margin-right: 0.4rem;
        }
        .tcName {
          display: inline-block;
          max-width: 3.16rem;
          overflow: hidden;
          margin-left: 0.15rem;
          font-size: 0.18rem;
        }
      }
    }
  }
  .pro-pagination {
    text-align: right;
    margin-top: 10px;
    .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #2a9dff;
      color: #ffffff;
    }
    .el-pagination.is-background .btn-prev,
    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .el-pager li {
      background-color: #034475;
    }
    .el-pagination--small .el-pagination__editor.el-input .el-input__inner {
      background: #034475;
      border: 0px;
    }
    .el-pagination--small span:not([class*="suffix"]),
    .el-pagination--small button {
      color: #034475;
      margin-left: 20px;
    }
    .el-pagination .btn-prev .el-icon,
    .el-pagination .btn-next .el-icon {
      color: #ccc;
    }
    .el-pagination.is-background .btn-prev:hover,
    .el-pagination.is-background .btn-next:hover,
    .el-pagination.is-background .el-pager li:hover {
      background-color: #2a9dff;
      color: #fff;
    }
    .el-pagination.is-background .el-pagination__total,
    .el-pagination.is-background .el-pagination__jump {
      color: #2a9dff;
      font-weight: 600;
    }
    .el-pagination.is-background .el-pagination__jump .el-input__inner {
      color: #fff;
      font-weight: 600;
    }
  }
}
</style>